<template>
    <div class="p4-container">
        <div class="chart-container" :style="{width:width}">
            <h2>Contrasting Commenting Trend of the Current Campaign with the Average Commenting Trends of other
                {{currentCampainCategory}} Campaigns in the Platform</h2>
            <div :class="className" :id="id" :style="{height:height,width:width}"></div>
        </div>
        <div class="cus-tip-container">
            <div class="icon"></div>
            <div class="cus-text">Time Left</div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import {mapState, mapMutations} from "vuex";
    import {
        feature4HistoricalComment,
        feature4CurrentComment
    } from "@/api/feature";

    export default {
        props: {
            className: {
                type: String,
                default: "chart"
            },
            id: {
                type: String,
                default: "chart"
            },
            width: {
                type: String,
                default: "200px"
            },
            height: {
                type: String,
                default: "200px"
            }
        },
        data() {
            return {
                chart: null,
                historicalData: [],
                currentData: []
            };
        },
        watch: {
            canDraw(val) {
                if (val) {
                    this.initChart();
                }
            }
        },
        mounted() {
            this.initChart();
        },
        beforeDestroy() {
            if (!this.chart) {
                return;
            }
            this.chart.dispose();
            this.chart = null;
        },
        computed: {
            ...mapState({
                currentCampainId: state => state.campaign.currentCampainId,
                currentCampainCategory: state => state.campaign.currentCampainCategory,
                canDraw: state => state.campaign.canDraw
            })
        },
        methods: {
            async initChart() {
                this.chart = echarts.init(document.getElementById(this.id));

                var featureData = await feature4HistoricalComment();
                var featureCurrentData = await feature4CurrentComment();
                this.historicalData = featureData[this.currentCampainCategory];
                this.currentData = featureCurrentData[this.currentCampainId];

                var x_data = [];
                var i = 1;
                while (i <= 20) {
                    x_data.push(i * 5);
                    i++;
                }

                var markStart = 5 * this.currentData.length;

                let option = {
                    color: ["#33b7c6", "#5f71ab"],
                    tooltip: {
                        trigger: "axis",
                        // formatter: 'Number of Comments of the Current Campaign: {c0}<br /> Average Number of Comments of other Campaigns: {c1}'
                        formatter: function (params) {
                            if (params.length == 2) {
                                return 'Number of Comments of the Current Campaign: ' + params[0].value
                                    + '<br /> Average Number of Comments of other Campaigns: '+ params[1].value
                            } else {
                                return 'Average Number of Comments of other Campaigns: '+ params[0].value
                            }
                        }
                    },
                    // toolbox: {
                    //   show: true,
                    //   feature: {
                    //     mark: { show: true },
                    //     dataView: { show: true, readOnly: false },
                    //     magicType: { show: true, type: ["line", "bar"] },
                    //     restore: { show: true },
                    //     saveAsImage: { show: true }
                    //   }
                    // },
                    calculable: true,
                    legend: {
                        data: [
                            "Number of Comments of the Current Campaign",
                            "Average Number of Comments of Others",
                            "Time Left"
                        ]
                    },
                    xAxis: [
                        {
                            type: "category",
                            name: "Percentile Timing",
                            data: x_data,
                            nameRotate: 45,
                            nameGap: 5,
                            axisLabel: {
                                formatter: "{value} %"
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            name: "Number of Comments",
                            minInterval: 1,
                            axisLabel: {
                                formatter: "{value}"
                            }
                        }
                    ],

                    series: [
                        {
                            name: "Number of Comments of the Current Campaign",
                            type: "bar",
                            data: this.currentData,
                            markArea: {
                                //标记区域

                                itemStyle: {
                                    //全局的

                                    normal: {color: "#b9aeae"}
                                },

                                data: [
                                    [
                                        {
                                            xAxis: markStart + "", //x轴坐标控制

                                            itemStyle: {
                                                color: "rgba(238,238,238, 0.7)"
                                            }
                                        },
                                        {
                                            xAxis: 100 + ""
                                        }
                                    ]
                                ]
                            }
                        },
                        {
                            name: "Average Number of Comments of Others",
                            type: "line",
                            itemStyle: {
                                normal: {
                                    color: "#5f71ab", //改变折线点的颜色
                                    lineStyle: {
                                        color: "#5f71ab" //改变折线颜色
                                    }
                                }
                            },
                            data: this.historicalData
                        }
                    ]
                };

                this.chart.setOption(option);
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .p4-container {
        width: 100%;
        height: 100%;
        position: relative;
        h2 {
            text-align: center;
            margin-bottom: 26px;
        }

        .cus-tip-container {
            display: flex;
            position: absolute;
            top: 82px;
            left: 746px;
            .icon {
                width: 30px;
                height: 13px;
                border-radius: 8px;
                background-color: rgb(243, 243, 243);
                margin-right: 6px;
            }
            .cus-text {
                color: gray;
                font-size: 13px;
            }
        }
    }
</style>
